<!--
 * @Date: 2024-12-11 20:18:14
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-12 09:29:10
 * @Description: 接口数据面板
-->
<template>
  <div class="source-server-panel">
    <el-form-item label="请求地址">
      <el-input v-model="dbConfig.url" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="请求方式">
      <HpSelect
        v-model="dbConfig.method"
        :options="RequestType.getTypes()">
      </HpSelect>
    </el-form-item>
    <el-form-item label="参数类型">
      <el-radio-group v-model="dbConfig.paramsType">
        <el-radio-button
          v-for="typeItem in RequestDataType.getTypes()"
          :key="typeItem.value"
          :label="typeItem.label"
          :value="typeItem.value"
        />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="请求参数" class="source-view-item" >
      <el-radio-group v-model="dbState.paramCodeType">
        <el-radio
          v-for="typeItem in CodeStudioDataType.getTypes()"
          :key="typeItem.value"
          :label="typeItem.label"
          :value="typeItem.value"
        />
      </el-radio-group>
    </el-form-item>
    <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.params"
      eventName="requestParams"
      :mode="CodeStudioDataType.getMode(dbState.paramCodeType)"
      :codeType="dbState.paramCodeType"
      :eventParams="['params']"
    />
    <el-form-item label="数据处理"  class="source-view-item">
      <div></div>
    </el-form-item>
    <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.responseFunc"
      mode="javascript"
      eventName="responseFunc"
      :codeType="CodeStudioDataType.FUNC.value"
      :eventParams="['data', 'params']"
    />
  </div>
</template>

<script setup>
import { RequestType, RequestDataType } from '@hp/config/pojo'
import { pluginManager } from '@hp/utils/pluginManager.js'
import { computed, reactive, ref } from 'vue';

import { CodeStudioDataType } from '@hp/config/pojo'

import CodeStudioPanel from '../components/CodeStudioPanel.vue'

const HpSelect = pluginManager.attrEditors['select'] 

const props = defineProps({
  schema: { type: Object },
  dataSource: { type: Object }
})

// 数据集
const dbState = reactive({
  cfgKey: 'serverConfig',
  codeKey: '',
  paramCodeType: 'json'
})
// 属性配置
const dbConfig = computed(() => {
  const config = props.dataSource[dbState.cfgKey]
  if (config.params.startsWith('func:')) {
    dbState.paramCodeType = CodeStudioDataType.FUNC.value
  } else {
    dbState.paramCodeType = CodeStudioDataType.JSON.value
  }
  return config
})


</script>

<style lang="scss" scoped>
</style>